<template>
    <el-card class="index">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="form">
        <el-form :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="150px" >
         <div v-if="form.userType == 1">
            <el-form-item label="用户类型" prop="userType" style="width: 100%;">
                <el-radio-group v-model="form.userType" @input="userTypeChange" :disabled="walletId">
                   <el-radio label="1">个人</el-radio>
                   <el-radio label="2">企业</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="证件类型" prop="cert_type">
                <el-select :disabled="walletId" v-model="form.cert_type" clearable placeholder="请选择用户类型">
                  <el-option :label="item.label" :value="item.value" v-for="item in certificateList" :key="item.value"/>
               </el-select>
            </el-form-item>
            <el-form-item label="证件号" prop="cert_no">
              <el-input :disabled="walletId" v-model.trim="form.cert_no" placeholder="请输入证件号" clearable  />
            </el-form-item>
            <el-form-item label="证件有效期" prop="cert_begin_date" style="width: 100%;">
              <el-date-picker
              @change="change"
                v-model="form.cert_begin_date"
                value-format="yyyyMMdd"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker
              @change="change"
                v-model="form.cert_end_date"
                value-format="yyyyMMdd"
                :disabled="form.cert_validity_type ==='1'"
                type="date"
                placeholder="截止日期">
              </el-date-picker>
             <el-checkbox true-label="1" false-label="0" style="margin-left: 20px;" @change="certValidityChange" v-model="form.cert_validity_type">永久</el-checkbox>
            </el-form-item>
            <el-form-item label="结算账号" prop="card_no">
              <el-input v-model.trim="form.card_no" placeholder="请输入结算账号" clearable  />
            </el-form-item>
            <el-form-item label="持卡人姓名" prop="card_name">
              <el-input v-model.trim="form.card_name" placeholder="请输入持卡人姓名" clearable  />
            </el-form-item>
            <el-form-item label="银行名称" prop="bank_code">
              <el-select filterable  v-model="form.bank_code" placeholder="请选择银行">
                 <el-option
                   v-for="item in dLimitLists"
                   :key="item.value"
                   :label="item.bankName"
                   :value="item.bankCode">
                 </el-option>
               </el-select>
              <!-- <el-input v-model="form.bank_code" placeholder="请输入银行名称" clearable  /> -->
            </el-form-item>
            <!-- prov_id area_id -->
            <el-form-item label="银行所在省市" prop="serviceRegion">
              <!-- <el-cascader  v-model="form.serviceRegion" :props="props"></el-cascader> -->
                <el-cascader
                   v-model="form.serviceRegion"
                   :options="regionList"
                   :props="{  expandTrigger: 'hover' }"
                   @change="geRegionChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="个人姓名" prop="name">
              <el-input v-model.trim="form.name" :disabled="walletId" placeholder="请输入个人姓名" clearable  />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile_no">
              <el-input v-model.trim="form.mobile_no" placeholder="请输入手机号" clearable  />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model.trim="form.email" placeholder="请输入邮箱" clearable  />
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model.trim="form.address" placeholder="请输入地址" clearable  />
            </el-form-item>
            <!-- <el-form-item label="备注">
              <el-input v-model="form.radio" placeholder="请输入备注" clearable  />
            </el-form-item> -->
          </div>
          <div v-if="form.userType == 2">
            <el-form-item label="用户类型" prop="userType" style="width: 100%;">
                <el-radio-group :disabled="walletId" v-model="form.userType" @input="userTypeChange">
                   <el-radio label="1">个人</el-radio>
                   <el-radio label="2">企业</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="企业全称" prop="reg_name">
              <el-input v-model.trim="form.reg_name" placeholder="请输入企业全称" clearable  />
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="license_code">
              <el-input :disabled="walletId" v-model.trim="form.license_code" placeholder="请输入统一社会信用代码" clearable  />
            </el-form-item>
            <el-form-item label="注册地址" prop="regArress" v-if="!walletId">
                <el-cascader
                   v-model="form.regArress"
                   :options="secondaryList"
                   :props="{ expandTrigger: 'hover' }"
                   @change="regProvChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="reg_detail">
              <el-input v-model.trim="form.reg_detail" placeholder="请输入详细地址" clearable  />
            </el-form-item>
            <el-form-item label="证照有效期" prop="license_begin_date" style="width: 100%;">
              <el-date-picker
              @change="change"
                v-model="form.license_begin_date"
                value-format="yyyyMMdd"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker
              @change="change"
                v-model="form.license_end_date"
                value-format="yyyyMMdd"
                :disabled="form.license_validity_type > 0"
                type="date"
                placeholder="截止日期">
              </el-date-picker>
                <el-checkbox style="margin-left: 20px;" true-label="1" false-label="0" @change="licenseValidityChange" v-model="form.license_validity_type">永久</el-checkbox>
            </el-form-item>
            <el-form-item label="法人证件类型" prop="legal_cert_type">
                <el-select :disabled="walletId" v-model="form.legal_cert_type" clearable placeholder="请选择法人证件类型">
                  <el-option  :label="item.label" :value="item.value" v-for="item in certificateList" :key="item.value"/>
               </el-select>
            </el-form-item>
            <el-form-item label="法人姓名" prop="legal_name">
              <el-input v-model.trim="form.legal_name" placeholder="请输入法人姓名" clearable  />
            </el-form-item>
            <el-form-item label="法人证件号" prop="legal_cert_no">
              <el-input v-model.trim="form.legal_cert_no" placeholder="请输入法人证件号" clearable  />
            </el-form-item>
            <el-form-item label="法人证件有效期" prop="legal_cert_begin_date" style="width: 100%;">
              <el-date-picker
              @change="change"
                v-model="form.legal_cert_begin_date"
                value-format="yyyyMMdd"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker
              @change="change"
                v-model="form.legal_cert_end_date"
                value-format="yyyyMMdd"
                :disabled="form.legal_cert_validity_type > 0"
                type="date"
                placeholder="截止日期">
              </el-date-picker>
                <el-checkbox style="margin-left: 20px;" true-label="1" false-label="0" v-model="form.legal_cert_validity_type">永久</el-checkbox>
            </el-form-item>
            <el-form-item label="结算账户类型" prop="card_type" >
              <el-select v-model="form.card_type" placeholder="请选择结算账户类型">
                <el-option label="对公"  value="0"></el-option>
                <el-option label="对私"  value="1"></el-option>
                <el-option label="对私非法人"  value="2"></el-option>
              </el-select>
                <!-- <el-radio-group v-model="form.card_type" >
                   <el-radio :label="0">对公</el-radio>
                   <el-radio :label="1">对私</el-radio>
                   <el-radio :label="2">对私非法人</el-radio>
                </el-radio-group> -->
            </el-form-item>
            <el-form-item label="银行账户名称" prop="card_name" >
                <el-input  v-model.trim="form.card_name" placeholder="请输入银行账户名称" clearable  />
            </el-form-item>
            <!-- <el-form-item label="企业开户许可证号"  >
                <el-input v-model="form.radio" placeholder="请输入企业开户许可证号" clearable  />
            </el-form-item> -->
            <el-form-item label="银行账户号"  prop="card_no">
                <el-input v-model.trim="form.card_no"  placeholder="请输入银行账户号" clearable  />
            </el-form-item>
            <el-form-item label="银行名称"   prop="bank_code">
                <el-select v-model="form.bank_code"  @change="enterpriseChange" filterable placeholder="请选择/搜索开户行">
                   <el-option
                     v-for="item in dLimitLists"
                     :key="item.bankCode"
                     :label="item.bankName"
                     :value="item.bankCode">
                   </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="银行所在省市" prop="serviceRegion">
                <el-cascader
                   v-model="form.serviceRegion"
                   :options="regionList"
                   :props="{ expandTrigger: 'hover' }"
                   @change="geRegionChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="支行"  prop="branch_code">
                <el-select v-model="form.branch_code" filterable placeholder="请选择/搜索开户支行">
                   <el-option
                     v-for="item in subBranchList"
                     :key="item.bank_code"
                     :label="item.bank_name"
                     :value="item.bank_code">
                   </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="联行号" >
                <el-input v-model="form.radio" placeholder="请输入联行号" clearable  />
            </el-form-item> -->
            <el-form-item label="联系人姓名" prop="contact_name">
                <el-input v-model.trim="form.contact_name" placeholder="请输入联系人姓名" clearable  />
            </el-form-item>
            <el-form-item label="联系人手机号" prop="contact_mobile">
                <el-input v-model.trim="form.contact_mobile" placeholder="请输入联系人手机号" clearable  />
            </el-form-item>
            <el-form-item label="联系人邮箱" prop="contact_email">
                <el-input v-model.trim="form.contact_email" placeholder="请输入联系人邮箱" clearable  />
            </el-form-item>
            <!-- <el-form-item label="备注" >
                <el-input v-model="form.radio" placeholder="请输入备注" clearable  />
            </el-form-item> -->
          </div>
        </el-form>  
      </div>
 </el-card>
</template>

<script>
import { dLimitList } from '../../../../utils/banks'
import { bankInfolist } from '@/api/fetchApi'
import axios from 'axios'

// api/info/getBank
 export default{
    name:'basicInformation',
    props:{
      regionList:[Array],
      secondaryList:[Array],
      basicInformEdit:[Object],
      walletId:[Number]
        // regionList:
    },
   
    data(){
        return{
            dLimitLists:dLimitList,
            subBranchList:[],
            form:{
                userType:'1',
                cert_validity_type:0,
                legal_cert_validity_type:'0',
                sms_send_flag:'N',
                card_type:'1',
                branch_code:''
                // file_list:[{}]
            },
            formRules:{
              userType:[{ required: true, message: '请选择用户类型', trigger: 'change' }],
              cert_type:[{ required: true, message: '请选择证件类型', trigger: 'change' }],
              cert_no:[{ required: true, message: '请输入证件号', trigger: 'blur' }],
              cert_begin_date:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.cert_validity_type){
                        if(this.form.cert_begin_date){
                          callback();
                        }else{
                          callback(new Error('请选择证件有效期！'))
                        }
                    }else{
                      if(this.form.cert_begin_date && this.form.cert_end_date){
                        callback();
                      }else{
                        callback(new Error('请选择证件有效期！'))
                      }
                    }
                 } }],
              name:[{ required: true, message: '请输入个人姓名', trigger: 'blur' }],
              mobile_no:[{ required: true, message: '请输入手机号', trigger: 'blur' }],
              card_no:[{ required: true, message: '请输入结算账号', trigger: 'blur' }],
              card_name:[{ required: true, message: '请输入持卡人姓名', trigger: 'blur' }],
              bank_code:[{ required: true, message: '请选择银行', trigger: 'change' }],
              serviceRegion:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.prov_id && this.form.area_id){
                      callback();
                    }else{
                      callback(new Error('请选择银行所在省市'))
                    }
                 } }],
                 reg_name:[{ required: true, message: '请输入企业全称', trigger: 'blur' }],
                 license_code:[{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
                 regArress:[{ required: true, message: '请选择注册地址', trigger: 'change' }],
                 reg_detail:[{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                 license_begin_date:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.license_validity_type){
                        if(this.form.license_begin_date){
                          callback();
                        }else{
                          callback(new Error('请选择证件有效期！'))
                        }
                    }else{
                      if(this.form.license_begin_date && this.form.license_validity_type){
                        callback();
                      }else{
                        callback(new Error('请选择证件有效期！'))
                      }
                    }
                 } }],
                 legal_cert_type:[{ required: true, message: '请选择法人证件类型', trigger: 'change' }],
                 legal_name:[{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
                 legal_cert_no:[{ required: true, message: '请输入法人证件号', trigger: 'blur' }],
                 legal_cert_begin_date:[{required: true, validator:(rule , value , callback)=>{
                    if(this.form.legal_cert_validity_type){
                        if(this.form.legal_cert_begin_date){
                          callback();
                        }else{
                          callback(new Error('请选择证件有效期！'))
                        }
                    }else{
                      if(this.form.legal_cert_begin_date && this.form.legal_cert_end_date){
                        callback();
                      }else{
                        callback(new Error('请选择证件有效期！'))
                      }
                    }
                 } }],
                 card_type:[{ required: true, message: '请选择法人证件类型', trigger: 'change' }],
                 bank_code:[{ required: true, message: '请选择银行账户名称', trigger: 'change' }],
                 branch_code:[{ required: true, message: '请选择开户支行', trigger: 'change' }],
                 contact_mobile:[{ required: true, message: '请输入联系人手机号', trigger: 'blur' }],
                 contact_name:[{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
                },
            certificateList:[ {value:'00',label:'身份证'} , {value:'04',label:'回乡证'} , {value:'14',label:'台胞证'} , {value:'15',label:'港澳台居住证'} ],
        }
    },
    watch:{
      form:{
        handler(nValue , oValue){
               this.$emit('basicInformChange' ,nValue)
            },
            deep:true
      },
      basicInformEdit:{
        handler(nValue , oValue){
               this.form = nValue
               this.form.serviceRegion = [nValue.prov_id , nValue.area_id] 
               this.form.regArress = [nValue.reg_prov_id , nValue.reg_area_id] 
               if(this.form.reg_name){
                this.form.userType = '2'
               }else{
                if(!this.form.card_type){
                  this.form.card_type = 1
                }
                this.form.userType = '1'
               }
               if(this.form.userType == '2'){
                this.form.contact_mobile = nValue.contact_mobile_no
                this.geRegionChange(this.form.serviceRegion)
                // this.form.regArress = [nValue.reg_prov_id , nValue.reg_area_id , nValue.reg_district_id]
                // this.regProvChange([nValue.reg_prov_id,nValue.reg_area_id,nValue.reg_district_id])
               }
               this.$emit('userTypeChange',this.form.userType)
            },
            deep:true
      }
    },
    mounted(){
      // this.initApiData()
        // this.initArealist()
    },
    methods:{
        // validateField
        regProvChange(v){
          this.form.reg_prov_id = [0]
          this.form.reg_area_id = [1]
          this.form.reg_district_id = [2]
        },
       async geRegionChange(v){
          this.form.prov_id = v[0]
          this.form.area_id = v[1]
          if(this.form.bank_code){
            axios({
              url:process.env.VUE_APP_BASE_URL + '/yfpay/api/info/getBank',
              data: JSON.stringify({level:2,parent_code:this.form.bank_code,city_code:v[1]}),
                method: 'POST',
                headers:{
                  'Content-Type': 'application/json',
                }
            }).then(res=>{
              this.subBranchList = res.data.bank_list
            })
            // const res = await bankInfolist({level:2,parent_code:this.form.bank_code,city_code:v[1]})
          }
        },
        async enterpriseChange(v){
          if(this.form.prov_id && this.form.area_id){
            axios({
              url:process.env.VUE_APP_BASE_URL + '/yfpay/api/info/getBank',
              data: JSON.stringify({level:2,parent_code:v,city_code:this.form.area_id}),
                method: 'POST',
                headers:{
                  'Content-Type': 'application/json',
                }
            }).then(res=>{
              this.subBranchList = res.data.bank_list
            })
          }
        },
        userTypeChange(v){
          // console.log(v)
          if(v == '1'){
             this.form.card_type = '1'
          }else{
            this.form.card_type = '2'
          }
          this.$forceUpdate()
           this.$emit('userTypeChange',v)
        },
        certValidityChange(v){
          if(v == 1){
            this.form.cert_end_date = ''
          }
        },
        licenseValidityChange(v){
          if(v == 1){
            this.form.license_end_date = ''
          }
        }
    }
 }
</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
</style>